<template>
  <div class="wait-rec">
    <!-- 总部、加盟商订单 -->
    <div v-if="utype!=1">
      <van-cell-group v-for="item in single" :key="item.id" :border="false">
        <van-cell :border="false" :title="item.spf_name||item.shopname" title-style="font-weight: bold;" @click="toDetail(item.id)" />
        <van-cell :border="false" :title="item.receiver.username + ' ' + item.receiver.phone" @click="toDetail(item.id)">
          <template #label>
            <div class="wait-rec-pd">{{item.receiver.province + item.receiver.city + item.receiver.district + item.receiver.address}}</div>
          </template>
        </van-cell>
        <van-cell :border="false" :title="'共 ' + item.products_num +' 件商品'" :value="'￥' + item.realFee" value-class="wait-rec-money" />
        <div class="spacing"></div>
      </van-cell-group>
    </div>
    <!-- 用户订单 -->
    <div v-else>
      <van-cell-group v-for="item in single" :key="item.id" :border="false">
        <van-cell :border="false" :title="'订单号：'+item.orderno" class="user-orders" @click="toDetail(item.id)" />
        <van-cell :border="false" :title="item.address==null?'暂无收货人信息':item.address.username + ' ' + item.address.phone" @click="toDetail(item.id)">
          <template #label>
            <div class="wait-rec-pd">{{item.address==null?'暂无收货地址':item.address.province + item.address.city + item.address.district + item.address.address}}</div>
          </template>
        </van-cell>
        <van-cell :border="false" :title="'共 ' + item.amount +' 件商品'" :value="'￥' + item.totalfee" value-class="wait-rec-money" />
        <div class="spacing"></div>
      </van-cell-group>
    </div>
    <van-empty description="暂无数据" v-if="single.length == 0" />
  </div>
</template>
          
<script>
export default {
  name: 'WaitReceive', // 待收货
  data () {
    return {
      utype: 1,
      single: [],
    }
  },
  methods: {
    toDetail (sid) {
      this.$router.push({ path: `/orderDetail/${sid}` })
    },
    getWaitReceive () {
      if (JSON.parse(localStorage.getItem('userInfo')).user.utype == 1) {
        this.$axios("/buy/userorderlist", {  // 店长的用户订单
          state: 3, //状态  -1: 购物车状态   0: 下单  1：已支付待发货  2：已发货配送中  3：配送中待收货   4：自提货/快递取货   5:已完成配送   6: 已完成自取  7：评价   10：已退款
          page: 1, //分页页码，数字类型
          limit: 10,
        })
          .then((res) => {
            this.single = res.data.data
          })
          .catch((err) => {
            console.error(err);
          });
      } else {
        this.$axios("/buy/orderlist", {
          state: 4, //-2 审核失败  -1: 审核状态   0: 未支付   1：下单支付配货中  3：配送中   4:已完成配送    10：已退款
          page: 1, //分页页码，数字类型
          limit: 10,
        })
          .then((res) => {
            this.single = res.data.data
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
  },
  created () {
    this.utype = JSON.parse(localStorage.getItem("userInfo")).user.utype
    this.getWaitReceive()
  },
}
</script>

<style lang="less" scoped>
.wait-rec {
  height: 100%;
  background-color: #f7f8fa;
  .spacing {
    width: 100%;
    height: 15px;
    background-color: #f7f8fa;
  }
  &-money {
    color: #e55252;
    font-weight: bold;
  }
  .user-orders {
    width: 100%;
    /deep/.van-cell__title {
      flex: auto;
      width: 80%;
    }
    /deep/.van-cell__value {
      flex: auto;
      width: 20%;
    }
  }
}
</style>